@extends('layouts.root')

@section('title' , '客户后台')


<!-- 主体内容 -->
@section('contents')
    <div class="" style="background: #e3e3e3;">
        {{--// 搜索框添加--}}
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">
                        {{--// 搜索框添加--}}
                        <div class="layui-inline">
                            <div class="">
                                <input type="text" name="goods_name" placeholder="商品名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="">
                                <input type="text" name="price" placeholder="价格" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" style="width:100px;">
                            <div class="">
                                <select name="limits">
                                    <option value="">查询条数</option>
                                    <option value="1">1</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                    <option value="500">500</option>
                                    <option value="1000">1000</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="">
                                <input type="text" class="layui-input" style="width:170px;" id="test16"
                                       placeholder="开始时间 到 结束时间" name="times">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-back-search">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{--// 删除一类按钮添加--}}
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
            </div>
        </script>


        {{--// 删除一操作--}}
        <script type="text/html" id="saveTodel">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="show">详情</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="edit">修改</button>
            </div>
        </script>

        {{--商品列表--}}
        @include('layouts.table')
    </div>
@endsection



@section('scripts')
    <script>
        layui.config({
            base: '/layuiadmin/'
        }).extend({
            index: 'lib/index',
        }).use(['laydate','index','table','form'],function(){
            var $ = layui.$
                ,table = layui.table
                ,form = layui.form
                ,laydate = layui.laydate
                ,layer = layui.layer;

            //自定义格式
            laydate.render({
                elem: '#test16'
                ,range: '/'
                ,format: 'yyyy-M-d'
            });

            table.render({
                elem: '#LAY-user-manages'
                ,url:`{{ route('zbsuser.goods.goodsBrowseData') }}` + '?include=user'
                ,toolbar: '#toolbarDemo_1'
                ,title: '用户数据表'
                ,totalRow: true
                ,id:'demoReload'
                ,cellMinWidth: 150
                ,method:'POST'
                ,limit:10
                ,cols: [[
                    {type: 'checkbox',}
                    ,{field:'id', title:'ID',width:70, align:'center', unresize: true, sort: true, totalRowText: '合计'}
                    ,{field:'goods_name', title:'商品名',align:'right', edit: 'text'}
                    ,{field:'price', title:'价格',align:'center', sort: true, totalRow: true}
                    ,{field:'user_browse_total',align:'center', title:'浏览量', totalRow: true,templet:function(e){
                        return ! e.user_browse_total[0] ? 0 : e.user_browse_total[0].pagevies;
                    }}
                    ,{field:'user_browse_total',align:'center', title:'订单量', totalRow: true, templet:function(e){
                        return ! e.user_browse_total[0] ? 0 : e.user_browse_total[0].order_num;
                    }}
                    ,{field:'user_browse_total',align:'center', title:'成交量', totalRow: true, templet:function(e){
                        return ! e.user_browse_total[0] ? 0 : e.user_browse_total[0].deal_num
                    }}
                    ,{field:'user_browse_total',align:'center', title:'展现量', totalRow: true,templet:function(e){
                        return ! e.user_browse_total[0] ? 0 : e.user_browse_total[0].show_num;
                    }}
                    ,{field:'created_at',align:'center', title:'加入时间', edit: 'text', sort: true}
                    ,{title:'操作',align:'center', templet: '#saveTodel', width:150}
                ]]
                ,done:function(){
                    layer.closeAll();
                }
                // ,page: true
            });


            //工具栏事件
            table.on('toolbar()', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);

                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选')
                        break;
                };
            });

            //操作 详情按钮 事件
            table.on('tool()', function(obj){
                var data = obj.data;

                switch(obj.event){
                    case 'show':
                        layer.open({
                            title: '商品名：' + data.goods_name + ' 价格：' + data.price,
                            type:2,
                            shade: 0.3,
                            shadeClose: true,
                            maxmin:true,
                            area:['95%','95%'],
                            content:"{{ route('zbsuser.goods.show' , '') }}/" + data.id
                        })
                        break;
                    case 'dels':
                        $.ajax({
                            url: "{{ route('zbsuser.goods.destroy' , '') }}/" + data.id,
                            dataType:'json',
                            type: 'DELETE',
                            success:function(res){
                                if (res.code){
                                    layer.msg(res.msg , {icon:6,time:1000,shade:0.3},function(r){
                                        obj.del();
                                    });
                                }else{
                                    layer.msg(res.msg , {icon:5,time:1000,shade:0.3},function(r){
                                    });
                                }
                            }
                        });
                        break;
                    case 'edit':
                        layer.open({
                            type:2
                            ,offset: '100px' // 显示定位
                            ,area:['400px','78%'] // 弹出框大小
                            ,title: '添加商品' //不显示标题栏
                            ,shade: 0.3
                            ,shadeClose:true
                            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            ,content:"/zbsuser/goods/"+data.id+"/edit"
                        });
                        break;
                };
            });

            //监听搜索
            form.on('submit(LAY-user-back-search)', function(data){
                var field = data.field;

                //执行重载
                table.reload('demoReload', {
                    page: { // 查询时重载分页按钮条数
                        limit:field.limits
                        ,curr: 1 //设定初始在第 1 页
                    }
                    ,where: {
                        parame :{
                            goods_name:field.goods_name
                            ,price:field.price
                            ,created_at:field.times
                        },
                        condition:{
                            goods_name:'%*%'
                            ,price:'%*%'
                            ,created_at:'between'
                        },
                        notverify:{
                            created_at:true,
                        }

                    }
                }, 'data');
            });

            var active = {
                add: function () { // 添加
                    layer.open({
                        type:2
                        ,offset: '100px' // 显示定位
                        ,area: ['70%','70%'] // 弹出框大小
                        ,title: '添加商品' //不显示标题栏
                        ,shade: 0.8
                        ,shadeClose:true
                        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        ,content:"{{ route('zbsuser.goods.create') }}",
                    })
                }
                ,show:function(obj){
                    console.log('fdsa')
                }
                ,dels:function(obj){
                    layer.msg(obj);
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
@endsection